<template>
  <div class="publicBox" id="bannerCss">
    <div class="boxItem" id="publicSearch">      

<el-form ref="form" :inline="true"  class="demo-form-inline">

 <el-form-item class="btn_box">
            <el-button class="pubBtnGree" @click="editBanner()" type="primary">新增</el-button>
  </el-form-item>

 <div class="banner_one">
   <p class="banner_text">轮播位1</p>
   <div class="pic_one">
     <div class="pic_forBox" v-for="item in bannerPosito(1)" :key="item.id">
       <div class="pic_box">
         <img class="img" :src="item.pic" alt="">
         <div class="icon_box">
           <i @click="editBanner(item)" class="flash-icon f-icon-pen"></i>
           <i @click="deleteBanner(item)" class="flash-icon f-icon-lajitong"></i>
         </div>
       </div>
       <div>
         <p>banner名称：{{item.name}}</p>
         <P>{{ChangeDateFormat(item.starttime,true)}}-{{ChangeDateFormat(item.endtime,true)}}</P>
       </div>
     </div>
   </div>
 </div>

 <div class="banner_one">
   <p class="banner_text">轮播位2</p>
   <div class="pic_one">
     <div class="pic_forBox" v-for="item in bannerPosito(2)" :key="item.id">
       <div class="pic_box">
         <img class="img" :src="item.pic" alt="">
         <div class="icon_box">
           <i @click="editBanner(item)" class="flash-icon f-icon-pen"></i>
           <i @click="deleteBanner(item)" class="flash-icon f-icon-lajitong"></i>
         </div>
       </div>
       <div>
         <p>banner名称：{{item.name}}</p>
         <P>{{ChangeDateFormat(item.starttime,true)}}-{{ChangeDateFormat(item.endtime,true)}}</P>
       </div>
     </div>
   </div>
 </div>

 <div class="banner_one">
   <p class="banner_text">轮播位3</p>
   <div class="pic_one">
     <div class="pic_forBox" v-for="item in bannerPosito(3)" :key="item.id">
       <div class="pic_box">
         <img class="img" :src="item.pic" alt="">
         <div class="icon_box">
           <i @click="editBanner(item)" class="flash-icon f-icon-pen"></i>
           <i @click="deleteBanner(item)" class="flash-icon f-icon-lajitong"></i>
         </div>
       </div>
       <div>
         <p>banner名称：{{item.name}}</p>
         <P>{{ChangeDateFormat(item.starttime,true)}}-{{ChangeDateFormat(item.endtime,true)}}</P>
       </div>
     </div>
   </div>
 </div>

 <div class="banner_one">
   <p class="banner_text">轮播位4</p>
   <div class="pic_one">
     <div class="pic_forBox" v-for="item in bannerPosito(4)" :key="item.id">
       <div class="pic_box">
         <img class="img" :src="item.pic" alt="">
         <div class="icon_box">
           <i @click="editBanner(item)" class="flash-icon f-icon-pen"></i>
           <i @click="deleteBanner(item)" class="flash-icon f-icon-lajitong"></i>
         </div>
       </div>
       <div>
         <p>banner名称：{{item.name}}</p>
         <P>{{ChangeDateFormat(item.starttime,true)}}-{{ChangeDateFormat(item.endtime,true)}}</P>
       </div>
     </div>
   </div>
 </div>

 <div class="banner_one">
   <p class="banner_text">轮播位5</p>
   <div class="pic_one">
     <div class="pic_forBox" v-for="item in bannerPosito(5)" :key="item.id">
       <div class="pic_box">
         <img class="img" :src="item.pic" alt="">
         <div class="icon_box">
           <i @click="editBanner(item)" class="flash-icon f-icon-pen"></i>
           <i @click="deleteBanner(item)" class="flash-icon f-icon-lajitong"></i>
         </div>
       </div>
       <div>
         <p>banner名称：{{item.name}}</p>
         <P>{{ChangeDateFormat(item.starttime,true)}}-{{ChangeDateFormat(item.endtime,true)}}</P>
       </div>
     </div>
   </div>
 </div>


 <div class="banner_one">
   <p class="banner_text">备用位</p>
   <div class="pic_one">
     <div class="pic_forBox" v-for="item in bannerPosito(0)" :key="item.id">
       <div class="pic_box">
         <img class="img" :src="item.pic" alt="">
         <div class="icon_box">
           <i @click="editBanner(item)" class="flash-icon f-icon-pen"></i>
           <i @click="deleteBanner(item)" class="flash-icon f-icon-lajitong"></i>
         </div>
       </div>
       <div>
         <p>banner名称：{{item.name}}</p>
         <P>{{ChangeDateFormat(item.starttime,true)}}-{{ChangeDateFormat(item.endtime,true)}}</P>
       </div>
     </div>
   </div>
 </div>

</el-form>
</div>
  </div>
</template>

<script>
import * as API from "@api/banner.js"
export default {
  components: {
 
  },
  data() {
    return {
        bannersArray:[]
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
      bannerPosito:function(){
        return function(position){
            let array=[]
            this.bannersArray.forEach(ele=>{
             if(ele.position==position){
                array.push(ele)
             }
           })
           return array
        }
     },
  },
  // 监控data中的数据变化
  watch: {
  
  },
  methods: {
    addBanner(){
    },
    editBanner(item){       //编辑banner图片
        this.$router.push({path:"/platform/banner/bannerNewbuild",query:{data:item}})
    },
    deleteBanner(item){  //删除banner图片
         let params={ids:[item.id]}
         API.deleteBnners(params).then(res=>{
              if(res.IsPositive){
                  this.$message.success({message:"操作成功"})
                  this.init()
              }else{
                  this.$message.error({message:res.ErrorCode})
                }
         })
    },
     init(){        //获取banners图片数据
         let that=this
         API.getBnners().then(res=>{
              if(res.IsPositive){
                this.bannersArray=res.Data.records
              }else{
                  this.$message.error({message:res.ErrorCode})
                }
         })
     }

  },
  created() {
      this.init()
  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
@import "../../styles/less/public.less";
#bannerCss{
  .pic_forBox{
    display: inline-block;
    width: 32%;
    margin-right: 2%;
    margin-bottom: 10px;
    p{
      margin-top: 10px;
    }
  }
  .pic_forBox:nth-child(3n){
    margin-right: 0;
  }
  .btn_box{
    border-bottom: 2px solid #000000;
    width: 1280px;
    padding: 0 0 15px 0;
  }
  .img{
     width: 100%;
     height: 155px;
     object-fit: contain;
  }
  .pic_box{
    position: relative;
    overflow: hidden;
    height: 155px;
  }
  .icon_box{
    width: 50px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.7);
  }
  .f-icon-pen , .f-icon-lajitong{
    color: #ffffff;
    font-size: 24px;
    margin-top: 35px;
    display: inline-block;
    cursor: pointer;
  }
  .banner_one{
    // padding:15px 0 15px 0;
    border-bottom:2px solid #000000;
    margin-bottom: 15px;
  }
  .pic_one{
    margin: 15px 0;
  }
  .banner_text{
    margin-bottom: 15px;
  }
}


</style>